<template>
  <div class="distributors-view">

    <el-popover :placement="placement" :width="900" trigger="click">
      <distributor-table :unit="unit" :booleState="booleState" :boole="boole" :list="tableData" />

      <template #reference>
        <div style="padding: 0px 5px;box-sizing: border-box;">
          <div style="display: flex;align-items: center;justify-content: left;line-height: 20px;">
            <span style="max-width: 80%;overflow: hidden; text-overflow: ellipsis">
              {{ str }}
            </span>
            <el-icon color="#417ff9" class="down-icon" style="margin-left: 5px">
              <arrow-down-bold />
            </el-icon>
          </div>
          
          <template v-if="booleType">
            <div v-if="isAudit" style="line-height: 20px;text-align: left" class="flow-status-color">配送信息审核中</div>
          </template>
          

        </div>
      </template>
    </el-popover>

  </div>
</template>

<script>
import {ArrowDownBold} from "@element-plus/icons";
import {defineComponent, reactive, toRefs, watch} from "vue";

export default defineComponent({
  name: "Index",
  components: { ArrowDownBold },
  props: {
    placement: {
      type: String,
      default: "bottom",
    },
    datas: {
      type: Object,
      default: [],
    },
    unit: {
      type: String,
      default: "",
    },
    booleType:{
      type: Boolean,
      default: true,
    },
    boole:{
      type: Boolean,
      default: true,
    },
    booleState:{
      type: Boolean,
      default: true,
    }
  },
  setup(props, { emit }) {
    var data = reactive({
      str: "",
      tableData: [],
      isAudit: false,
    });

    watch(
      () => props.datas,
      (newval, oldval) => {
        if (newval) {
          if (newval.length) {
            data.tableData = newval;
            if (newval.length === 1) {
              if (newval[0].rddType == 1) {
                data.str = "厂家配送";
              } else {
                data.str = newval[0].distributeName;
              }
            } else {
              data.str = "配送商[ " + newval.length + " ]";
            }
            for (let i = 0; i < data.tableData.length; i++) {
              if (data.tableData[i].flowStatus === "DOING") {
                data.isAudit = true;
              }
            }
          } else {
            data.str = "";
            data.isAudit = false;
          }
        } else {
          data.str = "";
          data.isAudit = false;
        }
      },
      { immediate: true, deep: true }
    );

    return {
      ...toRefs(data),
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.distributors-view {
  .down-icon {
    color: $active-color;
  }
}
</style>
